<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="./css/detail.css">
</head>

<body>
    <div id="main">
        <!-- 头部 -->
        <div id="header">
            <ul>
                <li class="font"><a href="./index.html"><img src="./img/返回.png" alt="出错"></a></li>
            </ul>
            <div id="head-right">
                <ul>
                    <li class="icon"><a href="#"><img src="./img/index2.png" alt="说明" class="warn"></a>
                    </li>
                    <li class="icon"><a href="#"><img src="./img/index3.png" alt="下载"></a></li>
                    <li class="icon"><a href="#"><img src="./img/index.png" alt="分享"></a></li>
                </ul>
            </div>
        </div>

        <!-- 漫画 -->
        <div id="cartoon">
            <div class="background"><img src="./img/锁龙.jpg" alt="错误"></div>
            <div class="cover">
                <p><img src="./img/4146390_1493184894_Yz1B62y4zr21.big.jpg" alt="漫画封面"></p>
            </div>
            <div class="info">
                <div class="comic">
                    <div class="font">
                        <p>锁龙</p>
                    </div>
                    <div class="comic-title">
                        <p>风行漫画</p>
                    </div>
                    <div class="comic-num">
                        <p>人气：</p>
                    </div>
                    <div class="comic-red">
                        <p>1.02亿</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 简介 -->
        <div id="intro">
            <div class="type">
                <span>类型：</span>
                <p>少年&nbsp;&nbsp;搞笑&nbsp;&nbsp;魔幻</p>
            </div>
            <div class="summary">
                <span>简介：</span>
                    起源于明朝的龙脉传说，传言以天池为中心的9
                    条山脉为真龙脉，九龙龙脉形成九龙镇妖锁阳阵，共同封印天
                    池底的神秘力量。历代掌权者都想开启龙脉封印获取力量，拉
                    拢“斩龙者”几经破坏，百年后，仅剩黑龙一脉，然而，新的危
                    机正在降临……（独家签约/每周日更新）
            </div>
        </div>
        <!-- 目录 -->
        <div id="table">
            <div class="list">
                <span>连载中</span>
                <p>(共214话)</p>
                <a href="#">全部目录</a>
            </div>
            <div class="list-chap">
                <img src="./img/chap.jpg" alt="错误">
                <span>0205.多事之秋</span>
                <p>第214话&nbsp;2021-05-16</p>
            </div>
        </div>
        <!-- 评论 -->
        <div id="remark">
            <div class="comment">
                <span>评论</span>
                <p>(共1.7万条评论)</p>
                <img src="./img/返回.svg" alt="错误">
            </div>
            <div class="user">
                <div class="box">
                    <ul>
                        <li><img src="./img/头像.jpg" alt="错误"></li>
                        <div>
                            <li class="name">伊森卡梅尔</li>
                            <li class="time">2021-05-19 01:50:08</li>
                            <li class="part">期待，期待，期待个啥我也不知道</li>
                        </div>
                    </ul>
                    <ul>
                        <li><img src="./img/头像1.jpeg" alt="错误"></li>
                        <div>
                            <li class="name">清雪伴路遥</li>
                            <li class="time">2021-05-18 22:10:48</li>
                            <li class="part">三张月票最经典，最长情</li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 功能区 -->
        <div id="funtion">
            <div class="fun-icon">
                <ul>
                    <li>
                        <img src="./img/票券--线性icon.svg" alt="错误">
                        <p>打赏</p>
                    </li>
                    <li>
                        <img src="./img/评论.svg" alt="错误">
                        <p>评论</p>
                    </li>
                    <li>
                        <img src="./img/爱心.svg" alt="错误">
                        <p>收藏</p>
                    </li>
                </ul>
            </div>
            <div class="btn">
                <div>
                    <button class="btn-read">阅读 第1话</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>